<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        shape="round"
        :show="true"
        :disabled="false"
      />
    </form>
    <ul class="searchUl">
      <li v-for="item in data.list" :key="item[1]" @click="handleClick">
        {{ item[0] }}
      </li>
    </ul>
    <div class="content">
      <h3>热门搜索</h3>
      <div class="hotList">
        <span
          @click="hotSearch(item)"
          v-for="(item, index) in indexValue"
          :key="index"
          >{{ item }}</span
        >
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import { jsonp } from "vue-jsonp";
export default {
  setup() {
    const value = ref("");
    let indexValue = reactive(["充气"]);
    const router = useRouter();
    let data = ref({
      list: [],
    });
    // console.log(inject());
    const onSearch = (val) => {
      indexValue.push(val);
      jsonp(
        `https://suggest.taobao.com/sug?code=utf-8&q=${val}&_ksTS=1626082842844_296&callback=jsonp297&k=1&area=c2c&bucketid=2`,
        param
      )
        .then((json) => {
          data.value.list = json.result;
          if (json.result.length === 0) {
            Toast({
              message: "你在搜什么鸡脖？",
              iconSize: "95px",
              icon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201711%2F21%2F20171121002133_Tvrte.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628682623&t=214378a67ed327de1881b418c2eef0e4",
            });
          }
        })
        .then(() => {
          setTimeout(() => {
            data.value.list.length = 0;
          }, 3000);
        });
    };
    const onCancel = () => {
      // Toast("取消");
      router.go(-1);
    };
    const param = {
      header: {
        "content-type": "application/xml", // 豆瓣一定不能是json
      },
    };

    // .catvh(() => {
    //   // console.log(err);
    // });

    const handleClick = () => {
      router.go(-1);
      Toast("实在是编不出来了");
    };
    const hotSearch = (item) => {
      value.value = item;
      jsonp(
        `https://suggest.taobao.com/sug?code=utf-8&q=${item}&_ksTS=1626082842844_296&callback=jsonp297&k=1&area=c2c&bucketid=2`,
        param
      )
        .then((json) => {
          data.value.list = json.result;
        })
        .then(() => {
          setTimeout(() => {
            data.value.list.length = 0;
          }, 3000);
        });
    };
    return {
      hotSearch,
      value,
      onSearch,
      onCancel,
      param,
      data,
      handleClick,
      indexValue,
    };
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  padding: 15px;
  h3 {
    font-size: 16px;
    font-weight: 900;
  }
  .hotList {
    // display: flex;
    padding: 20px 5px 0 5px;
    span {
      display: inline-block;
      padding: 20px;
      border-radius: 50%;
      background: #bebcbc;
      height: 20px;
      line-height: 0;
      font-size: 14px;
      margin: 5px;
    }
  }
}
.searchUl {
  position: fixed;
  top: 54px;
  width: 100%;
  padding: 0 20px;
  opacity: 0.5;
  z-index: 100;
  li {
    font-size: 14px;
    border-bottom: 1px solid #999999;
  }
}
</style>
